<!doctype html>
<html>
<head>
    <title>七夕快乐</title>
    <meta name="description" content="柯柯爱潘潘"/>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0"/>
    <style>
        html, body {
            background: url("images/bg1.jpg") no-repeat center;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .top {
            width: 80vw;
            max-width: 25rem;
            font-size: 1.5rem;
            color: #fff;
        }

        .heartBox {
            position: relative;
            margin-bottom: 1rem;
            cursor: url("images/cursor.ico"), auto;
        }

        .heartBoxText {
            font-size: 1rem;
            height: 1rem;
            letter-spacing: .3rem;
            text-align: center;
            position: absolute;
            left: 0;
            top: .29rem;
            right: 0;
            /*bottom: 0;*/
            margin: auto;
            color: rgba(255, 255, 255, 0.5);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none;
        }

        .heart {
            width: 4rem;
            height: 4rem;
            background-color: #cc2a5d;
            position: relative;
            transform: rotate(45deg);
            transform-origin: center center;
            animation: heart 1s ease-in infinite;
        }

        .heart::before,
        .heart::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #cc2a5d;
            border-radius: 50%;
        }

        .heart::before {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%);
        }

        .heart::after {
            position: absolute;
            top: 0;
            left: 0;
            transform: translateY(-50%);
        }

        @keyframes heart {
            0% {
                transform: scale(0.8) rotate(45deg);
                opacity: 0.8;
            }
            50% {
                transform: scale(1) rotate(45deg);
                opacity: 1;
            }
            100% {
                transform: scale(0.8) rotate(45deg);
                opacity: 0.8;
            }
        }

        /*start box*/
        .box {
            width: 88vw;
            height: 30vmin;
            perspective: 100vw; /*景深*/
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
        }

        .box .pic {
            height: 100%;
            width: 50%;
            position: relative;
            transform-style: preserve-3d; /*3d环境*/
            animation: play 20s linear infinite; /*动画名称 执行时间 匀速 无限执行*/
        }

        .box ul {
            height: 100%;
            width: 100%;
        }

        .box ul,
        .box ul li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .box ul li {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .box ul li img {
            width: 23vmin;
            height: 23vmin;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        /*start box*/
        /*定义一个关键帧*/
        @keyframes play {
            from {
                transform: rotateY(0deg);
            }
            to {
                transform: rotateY(360deg);
            }
        }

        #text {
            width: 88vw;
            min-height: 9rem;
            font-weight: bold;
            color: #6fade1;
            font-size: 1rem;
            line-height: 1.5rem;
            text-shadow: 0 0 1px #000;
            letter-spacing: .2rem;
        }

        #drawHeart {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            pointer-events: none;
        }

        .heartBoxText .click {
            width: 1.75rem;
            height: 1.75rem;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: none;
        }

        .heartsItem {
            position: fixed;
            opacity: 0;
            background-color: #cc2a5d;
            transform: rotate(45deg);
            animation: hearts 3s ease-in infinite;
            pointer-events: none;
        }

        .heartsItem::before,
        .heartsItem::after {
            content: '';
            width: 100%;
            height: 100%;
            background-color: #cc2a5d;
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%;
        }

        .heartsItem::before {
            transform: translateX(-50%);
        }

        .heartsItem::after {
            transform: translateY(-50%);
        }

        @keyframes hearts {
            0% {
                opacity: 0;
                transform: translateY(0%) rotate(45deg);
            }
            20% {
                opacity: 0.8;
                transform: translateY(-20%) rotate(45deg);
            }
            100% {
                opacity: 0;
                transform: translateY(-1000%) rotate(45deg);
            }
        }

    </style>
</head>
<body>
<div class="top">
    <marquee behavior="alternate">陪伴是最长情的告白</marquee>
</div>
<div class="heartBox">
    <div onclick="openHeart();" class="heart"></div>
    <div id="heartBoxText" class="heartBoxText">点我<img class="click" src="./images/click.png"/></div>
</div>
<div class="box">
    <div class="pic">
        <ul>
            <li><img src="images/L01.png?v=1"/></li>
            <li><img src="images/2.png?v=1"/></li>
            <li><img src="images/L06.png?v=1"/></li>
            <li><img src="images/L03.png?v=1"/></li>
            <li><img src="images/L04.png?v=1"/></li>
            <li><img src="images/L02.png?v=1"/></li>
            <li><img src="images/L05.png?v=1"/></li>
            <li><img src="images/5.png?v=1"/></li>
            <li><img src="images/L07.png?v=1"/></li>
            <li><img src="images/L08.png?v=1"/></li>
            <li><img src="images/L09.png?v=1"/></li>
        </ul>
    </div>
</div>
<div id="text"></div>
<canvas id="drawHeart" data-draw="0"></canvas>
<audio id="audio" loop src="music.mp3"></audio>
<script src="../../js/jquery-3.1.1.min.js"></script>
<!--雪花-->
<script src="js/snow.js"></script>
<script>
    $(function () {
        $(".pic ul li").each(function (i) {//遍历
            var deg = 360 / $(".pic ul li").length;//size个数
            //当前的li对象 添加css样式
            $(this).css({"transform": "rotateY(" + deg * i + "deg) translateZ(216px)"});
        });
        $.fn.snow({
            minSize: 10,
            maxSize: 15,
            newOn: 500,
            flakeColor: "#ffffff"
        });
        heartsInit();
    });
    (function () {
        var i = 0;
        var str = "能够遇见你是我最大的幸运，有了你，生活变得丰富多彩，有了你，世界变得如此迷人；你是我的世界，我的世界是你，对我来说，不是在最美好的时光遇见了你，而是遇见你后都是最美好的时光！";

        function typing() {
            //获取div
            var mydiv = document.getElementById("text");
            mydiv.innerHTML += str.charAt(i);
            i++;
            var id = setTimeout(typing, 100);
            if (i == str.length) {
                clearTimeout(id);
            }
        }

        typing();

    })();
    function audioPlay(cmd) {
        var DomAudio = document.getElementById('audio');
        if (cmd) {
            switch (cmd) {
                case 'play':
                    DomAudio.play();
                    break;
                case 'pause':
                    DomAudio.pause();
                    break;
            }
        } else {
            if (DomAudio.paused) {
                DomAudio.play();
            } else {
                DomAudio.pause();
            }
        }
    }
    function openHeart() {
        $('#heartBoxText').text('我爱你');
        audioPlay();
        var hearts = [];
        var canvas = document.getElementById('drawHeart');
        var wW = window.innerWidth;
        var wH = window.innerHeight;
        // 创建画布
        var ctx = canvas.getContext('2d');
        // 创建图片对象
        var heartImage = new Image();
        heartImage.src = 'images/heart.svg';
//        heartImage.src = 'images/xin.png';
//        heartImage.src = 'images/xin1.png';
        var num = 100;

        var $drawHeart = $("#drawHeart");
        if ($drawHeart.data('draw')) {
            $drawHeart.toggle();
        } else {
            $drawHeart.data('draw', '1')
            init();
        }

        window.addEventListener('resize', function () {
            wW = window.innerWidth;
            wH = window.innerHeight;
        });
        // 初始化画布大小
        function init() {
            canvas.width = wW;
            canvas.height = wH;
            for (var i = 0; i < num; i++) {
                hearts.push(new Heart(i % 5));
            }
            requestAnimationFrame(render);
        }

        function getColor() {
            var val = Math.random() * 10;
            if (val > 0 && val <= 1) {
                return '#00f';
            } else if (val > 1 && val <= 2) {
                return '#f00';
            } else if (val > 2 && val <= 3) {
                return '#0f0';
            } else if (val > 3 && val <= 4) {
                return '#368';
            } else if (val > 4 && val <= 5) {
                return '#666';
            } else if (val > 5 && val <= 6) {
                return '#333';
            } else if (val > 6 && val <= 7) {
                return '#f50';
            } else if (val > 7 && val <= 8) {
                return '#e96d5b';
            } else if (val > 8 && val <= 9) {
                return '#5be9e9';
            } else {
                return '#d41d50';
            }
        }

        function getText() {
            var val = Math.random() * 10;
            if (val > 1 && val <= 3) {
                return '爱你一辈子';
            } else if (val > 3 && val <= 5) {
                return '感谢陪伴';
            } else if (val > 5 && val <= 8) {
                return '我爱你';
            } else {
                return 'I Love You';
            }
        }

        function Heart(type) {
            this.type = type;
            // 初始化生成范围
            this.x = Math.random() * wW;
            this.y = Math.random() * wH;

            this.opacity = Math.random() * .5 + .5;

            // 偏移量
            this.vel = {
                x: (Math.random() - .5) * 5,
                y: (Math.random() - .5) * 5
            }

            this.initialW = wW * .5;
            this.initialH = wH * .5;
            // 缩放比例
            this.targetScale = Math.random() * .15 + .02; // 最小0.02
            this.scale = Math.random() * this.targetScale;

            // 文字位置
            this.fx = Math.random() * wW;
            this.fy = Math.random() * wH;
            this.fs = Math.random() * 10;
            this.text = getText();

            this.fvel = {
                x: (Math.random() - .5) * 5,
                y: (Math.random() - .5) * 5,
                f: (Math.random() - .5) * 2
            }
        }

        Heart.prototype.draw = function () {
            ctx.save();
            ctx.globalAlpha = this.opacity;
            ctx.drawImage(heartImage, this.x, this.y, this.width, this.height);
            ctx.scale(this.scale + 1, this.scale + 1);
            if (!this.type) {
                // 设置文字属性
                ctx.fillStyle = getColor();
                ctx.font = 'italic ' + this.fs + 'px sans-serif';
                // 填充字符串
                ctx.fillText(this.text, this.fx, this.fy);
            }
            ctx.restore();
        }
        Heart.prototype.update = function () {
            this.x += this.vel.x;
            this.y += this.vel.y;

            if (this.x - this.width > wW || this.x + this.width < 0) {
                // 重新初始化位置
                this.scale = 0;
                this.x = Math.random() * wW;
                this.y = Math.random() * wH;
            }
            if (this.y - this.height > wH || this.y + this.height < 0) {
                // 重新初始化位置
                this.scale = 0;
                this.x = Math.random() * wW;
                this.y = Math.random() * wH;
            }

            // 放大
            this.scale += (this.targetScale - this.scale) * .1;
            this.height = this.scale * this.initialH;
            this.width = this.height * 1.4;

            // -----文字-----
            this.fx += this.fvel.x;
            this.fy += this.fvel.y;
            this.fs += this.fvel.f;

            if (this.fs > 50) {
                this.fs = 2;
            }

            if (this.fx - this.fs > wW || this.fx + this.fs < 0) {
                // 重新初始化位置
                this.fx = Math.random() * wW;
                this.fy = Math.random() * wH;
            }
            if (this.fy - this.fs > wH || this.fy + this.fs < 0) {
                // 重新初始化位置
                this.fx = Math.random() * wW;
                this.fy = Math.random() * wH;
            }
        }

        function render() {
            ctx.clearRect(0, 0, wW, wH);
            for (var i = 0; i < hearts.length; i++) {
                hearts[i].draw();
                hearts[i].update();
            }
            requestAnimationFrame(render);
        }
    }
    function heartsInit() {
        var box = document.body;

        function init() {
            var width = box.offsetWidth;
            var count = parseInt(width / 50 * 5);
            for (var i = 0; i < count; i++) {
                var size = parseInt(ran(50, 150) / 10);
                var ele = document.createElement('div');
                ele.classList.add('heartsItem');
                ele.style.width = size + 'px';
                ele.style.height = size + 'px';
                ele.style.left = ran(5, 95) + '%';
                ele.style.top = ran(20, 98) + '%';
                ele.style.animationDelay = ran(0, 30) / 10 + 's';
                box.appendChild(ele);
            }
        }

        function ran(min, max) {
            min = parseInt(min);
            max = parseInt(max);
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        init();
    }
</script>
</body>
</html>